<template>
    <div class="layout">
        <div class="logo" ref="logo" v-if="showStart == 'logo'" @dblclick="open"></div>
        <div class="main" v-if="showStart == 'main'">

        </div>
    </div>
</template>

<script>
    let titlebar;
    import '@/assets/service.css'
    export default {
        data() {
            let win = this.$electron.remote.getCurrentWindow();
            return {
                win: win,
                screen: this.$electron.remote.screen,
                ipcRenderer: this.$electron.ipcRenderer,
                winBounds: null,
                whichScreen: null,
                showStart: 'main',
                lastPosition: false,
                bias: [],
                whichScreen: null,
            }
        },
        mounted() {
            const customTitlebar = require('custom-electron-titlebar');
            titlebar = new customTitlebar.Titlebar({
                backgroundColor: customTitlebar.Color.fromHex('#eee'),
                enableMnemonics: false,
            });
            titlebar.titlebar.style.width = 'auto';
            titlebar.titlebar.style.paddingLeft = '10px'
            titlebar.titlebar.style.right = '0px';
            titlebar.titlebar.style.zIndex = '40';
            titlebar.container.style.top = '0px';
            titlebar.menubarContainer.style.display = 'none'
            titlebar.updateTitle(`  Requester`);

            this.ipcRenderer.on('miniSize', (e, message) => {
                // console.log(message);
            });

            let winBounds = this.win.getBounds();
            this.whichScreen = this.screen.getDisplayNearestPoint({ x: winBounds.x, y: winBounds.y });
            this.open();
            this.win.setPosition((this.whichScreen.size.width - 800) / 2, (this.whichScreen.size.height - 600) / 2);
            this.win.on('close', e => {
                e.preventDefault();
                this.close();
            });
        },
        methods: {
            open() {
                this.ipcRenderer.send('changeResize', true);
                this.showStart = 'main';
                titlebar.titlebar.style.display = 'flex';
                this.unbindMove();
                this.win.setSize(800, 480);
                this.win.setPosition((this.whichScreen.size.width - 800) / 2, (this.whichScreen.size.height - 480) / 2)
            },
            close() {
                this.ipcRenderer.send('changeResize', false);

                this.showStart = 'logo';
                titlebar.titlebar.style.display = 'none';
                this.bindMove();
                this.win.setSize(50, 50);
                if (this.lastPosition) {
                    this.win.setPosition(this.lastPosition[0], this.lastPosition[1]);
                } else {
                    this.win.setPosition(this.whichScreen.size.width - 100, this.whichScreen.size.height - 150);
                };
            },
            bindMove() {
                document.addEventListener('mousedown', this.mousedownEvent);
                document.addEventListener('mouseup', this.mouseupEvent);
            },
            unbindMove() {
                document.removeEventListener('mousedown', this.mousedownEvent);
                document.removeEventListener('mouseup', this.mouseupEvent);
            },
            mousedownEvent(e) {
                switch (e.button) {
                    case 0:
                        this.bias = [e.x, e.y];
                        document.addEventListener('mousemove', this.moveEvent);
                        break
                }
            },
            mouseupEvent() {
                this.bias = [0, 0];
                document.removeEventListener('mousemove', this.moveEvent)
            },
            moveEvent(e) {
                this.lastPosition = [e.screenX - this.bias[0], e.screenY - this.bias[1]];
                this.win.setPosition(this.lastPosition[0], this.lastPosition[1])
            },
        },
    }


</script>
<style scoped>
    .layout {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .main {
        position: absolute;
        top: 30px;
        left: 0px;
        right: 0;
        bottom: 0;
    }

    .logo {
        cursor: pointer;
        position: absolute;
        width: 50px;
        height: 50px;
        background: url('~@/assets/logo.png');
        background-size: 100% 100%;
    }

    .logo img {
        display: block;
        width: 100%;
        height: 100%;
    }
</style>